<template>
  <div class="container">
    <div>
      <h1 class="user-info">家人列表</h1>
    </div>
    <div>
      <a-space class="user-bar">
        <a-input class="clearedInput" v-model="username" :style="{ width: '480px' }" placeholder="请输入家人姓名" allow-clear />
        <a-input class="clearedInput" v-model="id" :style="{ width: '480px' }" placeholder="请输入家人id" allow-clear />
        <a-input class="clearedInput" v-model="bid" :style="{ width: '480px' }" placeholder="请输入冰箱id" allow-clear />
      </a-space>
    </div>
    <!-- 列表部分 -->
    <div>
      <div class="addclassbtn">
        <a-button type="primary" @click="addClassFun">录入用户</a-button>
        <a-button type="primary" @click="resetMessage" class="user-reset">重置</a-button>
        <a-button type="primary" @click="searchUserMethod" class="user-research">查询</a-button>
      </div>
      <div>
        <a-table row-key="id" :loading="loading" :pagination="pagination" :data="families" :bordered="false">
          <template #columns>
            <a-table-column :title="$t('id')" data-index="userId" />
            <a-table-column :title="$t('用户名')" data-index="userName" />
            <a-table-column :title="$t('用户密码')" data-index="userPassword" />
            <a-table-column :title="$t('用户权限')" data-index="userRight" />
            <a-table-column :title="$t('冰箱bid')" data-index="userBid" />
            <a-table-column :title="$t('操作')" data-index="operations">
              <template #cell="row">
                <a-button @click="reviseList(row)" type="text" size="small">
                  {{ $t('编辑') }}
                </a-button>
                <a-popconfirm @ok="delList(row)" content="Are you sure you want to delete?" type="error">
                  <a-button type="text" size="small">
                    {{ $t('删除') }}
                  </a-button>
                </a-popconfirm>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </div>
    </div>
    <div v-show="visible" class="a-mask">
      <div class="addClassIpt">
        <AddClass @confirmfun="confirmfun" @cancelfun="cancelfun"></AddClass>
      </div>
    </div>
    <div v-show="visible_revise" class="a-mask">
      <div class="addClassIpt">
        <ReviseClass @confirmFun_revise="confirmFun_revise" @cancelFun_revise="cancelFun_revise" v-bind:row_="row_">
        </ReviseClass>
      </div>
    </div>
  </div>
</template>

<script>
import AddClass from './add-class.vue';
import ReviseClass from './revise-subject.vue';
import { selectFamilyByUserBid, selectFamilyByParams } from '@/api/login';

export default {
  components: {
    AddClass,
    ReviseClass
  },
  data() {
    return {
      visible: false,
      visible_revise: false,
      arrList: [],
      classList: [],
      username: '',
      id: '',
      bid: '',
      families: [],
      userObject: {},
      loading: false,
      pagination: {
        current: 1,
        pageSize: 10
      },
      avatar: '',
      salt: ''
    };
  },
  methods: {
    addClassFun() {
      this.$router.push('/authority/auth');
    },
    cancelfun() {
      this.visible = false;
    },
    handleUserList() {
      this.loading = true;
      selectFamilyByUserBid(this.userObject.userbid)
        .then((res) => {
          console.log(res.data.data);
          this.families = res.data.data;
        })
        .catch((error) => {
          console.error('获取用户列表失败:', error);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    delList(row) {
      // 删除逻辑
    },
    // 编辑
    reviseList(row) {
      console.log('1');
      this.visible_revise = true;
      this.row_ = row;
    },
    resetMessage() {
      // 数据清空
      this.username = '';
      this.id = '';
      this.bid = '';
      this.technology = '';
      this.mobile = '';
      this.avatar = '';
      this.salt = '';
      // 刷新
      this.handleUserList();
    },
    // 查询用户
    searchUserMethod() {
      this.loading = true;
      selectFamilyByParams({
        userName: this.username,
        userId: this.id,
        userBid: this.bid
      })
      .then((res) => {
        console.log(res.data);
        if (res.data.code === "200") {
          this.families = res.data.data
        } else {
          console.error('查询失败:', res.data.msg);
        }
      })
      .finally(() => {
        this.loading = false;
      });
    },
    cancelFun_revise() {
      this.visible_revise = false;
    },
    // 获取身份信息
    getDownList() {
      console.log(1);
      // getRoleList().then((res) => {
      //   this.arrList = res.data.data;
      // });
    }
  },
  created() {
    let userInfo = localStorage.getItem('userInfo');
    try {
      this.userObject = JSON.parse(userInfo);
      this.handleUserList();
    } catch (error) {
      console.error('解析 JSON 字符串时出错:', error);
    }
  }
};
</script>


<style scoped lang="less">
.container {
  padding: 0 20px 40px 20px;
  background-color: var(--color-bg-2);
  overflow: hidden;
  height: 100%;
}

.searchbutton {
  margin-left: 84px;
}

.linemarginleft {
  margin-right: 37px;
}

.linemarginright {
  margin-left: 37px;
}
.addclassbtn {
  margin-top: 28px;
  margin-bottom: 24px;
  margin-left: 5px;
  display: flex;
  gap: 10px;
  justify-content: flex-end; /* 让子元素靠右对齐 */
}

.a-mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1000;

  .addClassIpt {
    width: 700px;
    height: 400px;
    background-color: rgb(255, 255, 255);
    margin: auto;
    margin-top: 120px;
    padding-top: 10px;
    padding-left: 10px;
    border-radius: 20px;
  }
}

.mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1000;

  .addClassIpt {
    width: 700px;
    height: 350px;
    background-color: rgb(255, 255, 255);
    margin: auto;
    margin-top: 120px;
    padding-top: 10px;
    padding-left: 10px;
    border-radius: 20px;
  }
}

.user-info {
  margin-left: 20px;
}

.user-bar {
  margin-left: 20px;
}

.user-reset {
  margin-left: 0;
}

.user-research {
  margin-left: 0;
}
</style>